axis
坐标轴依赖于grid，通常使用与折线图、柱状图等基于直角坐标系的图表。
组件详细配置项如下，每个配置项都有一个默认值：
//data: undefined, // {Array} 系列中的数据内容数组。数组项通常为具体的数据项。数据项格式同echarts类似，http://echarts.baidu.com/option.html#xAxis.data
$dataIndex: undefined, // {number} 依赖的$data的index，格式同上，优先级低于data，取得的数据需符合data的格式
dataKey: undefined, // {string|number} 搭配$dataIndex使用，方便从依赖的$data中取数据，等同于 data.map((d) => d[dataKey])，最终取得的数据需符合data的格式
$gridIndex: 0, // {Array|Array<number>} 依赖的grid的index, 若为数组，将在多个grid触发axis事件，但仅在数组第一项grid位置进行axis的绘制
$dataZoomIndex: undefined, // {number} 依赖的dataZoom的index
ifTriggerHighlight: true, // {boolean} 是否触发highlight和downplay
start: '0%', // {string} 数据起始位置百分比，设置dataZoomIndex后则使用dataZoom的start
end: '100%', // {string} 数据结束位置百分比，设置dataZoomIndex后则使用dataZoom的end
// https://github.com/xswei/d3js_doc/tree/master/d3js_doc_old/API/d3-scale-master
type: 'band', // {string} scale类型，同d3-scale，linear | band | point | log | time
barGap: '20%', // {string} 适用于柱状图，柱间距离
paddingInner: '60%', // {string} 仅对band类型有效，band与band之间的内部间隔，以百分比形式定义.
paddingOuter: '30%', // {string} 仅对band类型有效，band两边相对于range两端的间隔，同样以百分比形式定义.
domainScale: 1.2, // {number} 对domain进行缩放，仅适用于linear型轴
nice: false, // {boolean} 对domain 进行适当的扩展，以使其起始值是一个“整数”，会与domainScale叠加。仅连续型轴（linear、log等）有效
domainFormatter: undefined, // {Function} 重新设置domain，仅连续型轴有效
max: undefined, // {number} 设置domain的最大值，仅连续型轴有效
min: undefined, // {number} 设置domain的最小值，仅连续型轴有效
splitNumber: undefined, // {number} 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。仅作用于连续类型axis
intervalLength: undefined, // {number} 坐标轴间隔宽度，仅作用于band或point类型axis，当设置interval后无效，若不设置将根据第一个标签宽度进行自适应间隔
interval: undefined, // {number} 坐标轴标签间隔个数
tickValues: undefined, // {Function|Array} 自定义要显示的标签
alwaysShowLast: false, // {boolean} 总是显示最后一个标签
alwaysShowFirst: false, // {boolean} 总是显示第一个标签
position: 'bottom', // {string} 坐标轴位于grid的位置， 'bottom' | 'top' | 'left' | 'right'
xOrY: 'x', // {string} 作为x轴还是y轴， 'x' | 'y'
symmetry: false, // {boolean} 是否以0轴对称
sliceData: true, // {boolean} 适用于y轴，当x轴为连续型轴是否对数据进行裁剪，再进行值域计算
filterHide: true, // {boolean} 是否将隐藏的series过滤后再进行值域计算
logBase: 10,
// 坐标轴线
line: {
show: true, // {boolean} 是否显示坐标轴线， true | false
// 坐标轴线样式
style: {
stroke: 'rgba(51, 51, 51, 0.1)',
lineWidth: 2
},
onZero: false, // {boolean} X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上
onZeroAxisIndex: 1 // {number} 在哪个轴的 0 刻度上
},
// 坐标轴刻度相关设置
tick: {
show: true, // {boolean} 是否显示坐标轴刻度， true | false
outerSize: 6, // {number} 刻度朝外长度
innerSize: 0, // {number} 刻度朝内长度
onCenter: true, // 刻度位于每一段的中间
// 刻度样式
style: {
lineWidth: 1,
stroke: 'rgba(51, 51, 51, 0.1)'
}
},
// 坐标轴刻度标签的相关设置
label: {
show: true, // {boolean} 是否显示坐标轴刻度标签， true| false
inRange: false, // {boolean} 是否在range的范围内显示
padding: 10, // {number} 标签离轴线的距离
// 标签样式
style: {
fill: 'rgba(51, 51, 51, 0.4)',
rich: {
Y: {},
m: {},
b: {},
d: {},
a: {},
I: {},
p: {}
}
},
followLine: false, // {boolean} 标签位置是否跟随轴线
rotate: 0, // {number} 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。 旋转的角度从 -90 度到 90 度
formatter: undefined // {Function} 刻度标签的内容格式化函数
},
// 坐标轴在 grid 区域中的分隔线。
splitLine: {
show: false, // {boolean} 是否显示分隔线。
// 分隔线样式
style: {
color: 'rgba(51, 51, 51, 0.1)',
lineWidth: 1
}
},
// 坐标轴在 grid 区域中的分隔区域。
splitArea: {
show: false, // {boolean} 是否显示分隔区域。
onRect: false, // {boolean} 是否只显示bar范围区域，仅适用于bar类型图
// 分隔区域的样式设置
style: {
color: ['rgba(51, 51, 51, 0.05)', 'rgba(0, 0, 0, 0)']
}
},
// 坐标轴名称。
axisName: {
show: false, // {boolean} 是否显示
text: '', // {string} 名称
offset: [0, 0], // {Array} 名称偏移
location: 'end', // {string} 显示在坐标轴得位置 'start' | 'center' | 'end'
style: {}
},
cursor: 'default', // {string} 鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
zlevel: 0, // {number} 所有图形的 zlevel 值
z: 0, // {number} 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
animation: true, // {boolean} 是否开启动画。
animationDuration: 500, // {number} 初始动画的时长
animationEasing: 'cubicOut' // {string} 初始动画的缓动效果。不同的缓动效果可以参考 http://www.echartsjs.com/gallery/editor.html?c=line-easing。